<template>
  <div style="border: 1px solid #d9d9d9; border-radius: 6px; overflow: hidden">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 200px; overflow-y: hidden"
      v-model="html"
			@onChange="onChange"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup>
import { ref, defineEmits, shallowRef, onBeforeUnmount, watch, nextTick } from 'vue'
import { t } from '@/i18n'
import '@wangeditor-next/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor-next/editor-for-vue'
const { modelValue, disabled } = defineProps(
  {
    modelValue: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  }
)
const emit = defineEmits()
const html = ref(modelValue)

const editorRef = shallowRef()
const toolbarConfig = {
  excludeKeys: [
    'emotion',
    'headerSelect',
    'italic',
    'group-more-style',
    'insertVideo',
    'insertImage',
    'codeBlock',
    'todo',
    'uploadImage',
    'color',
    'bgColor',
    'redo',
    'undo',
    'insertTable',
    'fullScreen',
    'insertImage',
    'group-image',
    'insertLink',
    'blockquote'
    
  ],
}
const editorConfig = { placeholder: t('common', '') }
const mode = 'simple'
const handleCreated = editor => {
  editorRef.value = editor
  if (disabled) editor.disable()
}

const onChange = editor => {
  if (editor.getHtml() !== '<p><br></p>') emit('update:modelValue', editor.getHtml())
}
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

</script>

